<template>
	<view class="container">
		<view class="uni-padding-wrap uni-common-mt">
			<u-subsection :current="current" :list="items" mode="subsection" fontSize="16px" @change="onClickItem" />
		</view>
		<view class="content">
			<view v-show="current === 0">
				<u-form ref="form" :model="form" :rules="rules" class="formStyle">
					<u-form-item label="编号" name="cusSn" required>
						<u--input type="text" v-model="form.cusSn" placeholder="请输入客户编号" disabled />
					</u-form-item>
					<u-form-item label="全称" name="cusName" required>
						<u--input type="text" v-model="form.cusName" placeholder="请输入客户名称" />
					</u-form-item>
					<u-form-item label="简称" name="cusShortName" required>
						<u--input type="text" v-model="form.cusShortName" placeholder="请输入客户名称" />
					</u-form-item>
					<u-form-item label="级别" name="cusLevel">
						<!-- <u--input type="text" v-model="form.cusLevel" placeholder="请选择级别" @focus="showPick('cusLevel')" />
						<u-picker :show="levelShow" :columns="levelList" keyName="text">
						</u-picker> -->
						<uni-data-picker placeholder="请选择级别" :localdata="dict.type.sys_user_sex" v-model="form.cusLevel"
							:map="mapInfo">
						</uni-data-picker>
					</u-form-item>
					<u-form-item label="行业" name="cusTrade">
						<uni-data-picker placeholder="请选择行业" :localdata="tradeList" v-model="form.cusTrade">
						</uni-data-picker>
					</u-form-item>
					<u-form-item label="来源" name="cusSource">
						<uni-data-picker placeholder="请选择来源" :localdata="sourceList" v-model="form.cusSource">
						</uni-data-picker>
					</u-form-item>
					<u-form-item label="区域" name="cusRegion">
						<uni-data-picker placeholder="请选区域" :localdata="regionList" v-model="form.cusRegion">
						</uni-data-picker>
					</u-form-item>
					<u-form-item label="位置" name="cusAddress" required>
						<u--input type="text" v-model="form.cusAddress" placeholder="请点击图标选择位置" readonly>
							<template slot="suffix">
								<u-button @tap="wakeMap" text="选取" type="success" size="mini"></u-button>
							</template>
						</u--input>
						<u--input v-show="false" type="text" v-model="form.latitude" placeholder="请选择地址" />
						<u--input v-show="false" type="text" v-model="form.longitude" placeholder="请选择地址" />
					</u-form-item>
					<u-form-item label="所属部门" name="deptId">
						<u--input type="text" v-model="form.cusdeptIdSn" placeholder="请选择部门" />
					</u-form-item>
					<u-form-item label="负责人" name="userId">
						<u--input type="text" v-model="form.userId" placeholder="请选择负责人" />
					</u-form-item>
					<u-form-item label="备注" name="remark">
						<u--textarea v-model="form.remark" placeholder="备注信息"></u--textarea>
					</u-form-item>
				</u-form>
				<u-button @click="submit" type="primary">提交</u-button>
			</view>
			<view v-show="current === 1">
				<u-form ref="contactForm" :model="contactForm" :rules="contactRules" class="formStyle">
					<u-form-item label="姓名" name="name" required>
						<u--input type="text" v-model="contactForm.name" placeholder="请输入姓名" />
					</u-form-item>
					<u-form-item label="职位" name="position">
						<u--input type="text" v-model="contactForm.position" placeholder="请输入职位" />
					</u-form-item>
					<u-form-item label="性别" name="sex">
						<uni-data-picker placeholder="请选择性别" :localdata="dict.type.sys_user_sex"
							v-model="contactForm.sex" :map="mapInfo">
						</uni-data-picker>
					</u-form-item>
					<u-form-item label="电话" name="tel" required>
						<u--input type="text" v-model="contactForm.tel" placeholder="请输入电话" />
					</u-form-item>
					<u-form-item label="备注" name="remark">
						<u--textarea v-model="contactForm.remark" placeholder="请选择地址"></u--textarea>
					</u-form-item>
					<u--input type="text" v-model="contactForm.cusSn" v-show="false" />
				</u-form>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		listCustomer,
		getCustomer,
		delCustomer,
		addCustomer,
		updateCustomer
	} from "@/api/crm/customer";
	import {
		listContact,
		getContact,
		delContact,
		addContact,
		updateContact
	} from "@/api/crm/contact";
	import {
		getMaxSn
	} from "@/api/system/sysSn";
	export default {
		dicts: ['sys_user_sex', 'yes_and_no'],
		data() {
			return {
				items: ['客户信息', '联系人'],
				activeColor: '#007aff',
				current: 0,
				colorIndex: 0,
				levelShow: false,
				styleType: 'button',
				// picker字段映射配置
				mapInfo: {
					text: 'label',
					value: 'value'
				},
				//levelList: [],
				levelList: [{
						value: 0,
						text: "一般"
					},
					{
						value: 1,
						text: "重要"
					}

				],
				tradeList: [],
				sourceList: [],
				regionList: [],
				sexList: [{
						value: 0,
						text: "男"
					},
					{
						value: 1,
						text: "女"
					},
					{
						value: 2,
						text: "保密"
					}
				],
				// 表单参数
				form: {
					id: undefined,
					cusSn: undefined,
					cusName: undefined,
					cusShortName: undefined,
					cusLevel: undefined,
					cusTrade: undefined,
					cusSource: undefined,
					cusRegion: undefined,
					cusAddress: undefined,
					latitude: undefined,
					longitude: undefined,
					cusContact: undefined,
					cusTelephone: undefined,
					cusEmail: undefined,
					cusFax: undefined,
					deptId: undefined,
					userId: undefined,
					remark: undefined,
					createName: undefined,
					createBy: undefined,
					createTime: undefined,
					updateBy: undefined,
					updateTime: undefined,
					delFlag: undefined
				},
				// 联系人信息
				contactForm: {
					id: undefined,
					cusSn: undefined,
					name: undefined,
					position: undefined,
					sex: undefined,
					tel: undefined,
					remark: undefined,
					createBy: undefined,
					createTime: undefined,
					updateBy: undefined,
					updateTime: undefined,
					delFlag: undefined
				},
				rules: {
					// 对name字段进行必填验证
					cusName: {
						// name 字段的校验规则
						rules: [
							// 校验 name 不能为空
							{
								required: true,
								message: '请填写客户名称',
								// blur和change事件触发检验
								trigger: ['blur', 'change'],
							}
						],
					},
					cusAddress: {
						// 字段的校验规则
						rules: [
							// 校验 name 不能为空
							{
								required: true,
								message: '请选择客户位置',
								// blur和change事件触发检验
								trigger: ['blur', 'change'],
							}
						],
					}
				},
				contactRules: {}
			}
		},
		onLoad: function (option) {
			const id = option.id;
			this.getCustomerDetail(id);
		},

		methods: {
			// 分段器使用
			onClickItem(index) {
				if (this.current !== index) {
					this.current = index
				}
			},
			getCustomerDetail(id) {
				getCustomer(id).then(res => {
					this.form = res.data;
				})
			},

			// 获取当前定位信息
			getlocation() {
				let _this = this;
				dd.device.geolocation.get({
					targetAccuracy: 200,
					coordinate: 1,
					withReGeocode: true,
					useCache: false, //默认是true，如果需要频繁获取地理位置，请设置false
					onSuccess: function(result) {
						console.log('当前位置的经度：' + result.longitude);
						console.log('当前位置的纬度：' + result.latitude);
						_this.form.longitude = result.longitude;
						_this.form.latitude = result.latitude;
					},
					onFail: function(err) {}
				});
			},
			// 地图选择地址
			wakeMap() {
				let _this = this;
				dd.biz.map.locate({
					latitude: this.form.latitude, // 纬度，非必须
					longitude: this.form.longitude, // 经度，非必须
					scope: 500, // 限制搜索POI的范围；设备位置为中心，scope为搜索半径
					onSuccess: function(result) {
						/* result 结构 
				        {
				            province: 'xxx', // POI所在省会，可能为空
				            provinceCode: 'xxx', // POI所在省会编码，可能为空
				            city: 'xxx', // POI所在城市，可能为空
				            cityCode: 'xxx', // POI所在城市编码，可能为空
				            adName: 'xxx', // POI所在区名称，可能为空
				            adCode: 'xxx', // POI所在区编码，可能为空
				            distance: 'xxx', // POI与设备位置的距离
				            postCode: 'xxx', // POI的邮编，可能为空
				            snippet: 'xxx', // POI的街道地址，可能为空
				            title: 'xxx', // POI的名称
				            latitude: 39.903578, // POI的纬度
				            longitude: 116.473565, // POI的经度
				        }
						*/
						_this.form.cusAddress = result.province + result.city + result.adName + result.snippet;
						_this.form.longitude = result.longitude.toString();
						_this.form.latitude = result.latitude.toString();
					},
				 onFail: function(err) {}
				});

			},
			submit() {
				this.customerSubmit()
				if (this.contactForm.name !== "" && this.contactForm.name !== undefined) {
					this.contactSubmit()
				}
				setTimeout(() => {
					// 返回上一页并刷新数据方法
					let pages = getCurrentPages(); // 当前页面
					let beforePage = pages[pages.length - 2]; // 上一页
					// 返回上一页 delta返回的页面数 如果delta大于现有页面数，则返回首页
					uni.navigateBack({
						delta: 1,
						success: function() {
							beforePage.$vm.isRefresh = true;
						}

					})
				}, 1000);

			},
			customerSubmit() {
				this.$refs.form.validate().then(res => {
					console.log('表单数据信息：', res);
					console.log('表单数据信息：', this.form);
					addCustomer(this.form).then(response => {
						uni.showToast({
							title: '提交成功',
							icon: 'none'
						})
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			contactSubmit() {
				this.$refs.contactForm.validate().then(res => {
					console.log('表单数据信息：', res);
					addContact(this.contactForm).then(response => {

					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			}


		}
	}
</script>

<style>
	.formStyle {
		padding: 10px;
		background-color: #fff;
	}
</style>
